<template>
  <div>
    <div class="box1">
        <div class="ml-left">
            <img class="ml-pic" src="../../../assets/img/home/1.png" alt="">
            <div class="ml-text">
                <p class="ml-name">玛丽·乔布斯</p>
                <p class="ml-gl">工龄：10年</p>
                <p class="ml-studen">学生：1000个</p>
            </div>
        </div>
        <el-button class="ml-button l-b ml-button1" round>
            <span class="b-text">查看介绍</span>
        </el-button>
    </div> 
    
    <div class="box1">
        <div class="ml-left">
            <img class="ml-pic" src="../../../assets/img/home/2.png" alt="">
            <div class="ml-text">
                <p class="ml-name">玛丽·乔布斯</p>
                <p class="ml-gl">工龄：10年</p>
                <p class="ml-studen">学生：1000个</p>
            </div>
        </div>
        <el-button class="ml-button l-b ml-button2" round>
            <span class="b-text">查看介绍</span>
        </el-button>
    </div> 

    <div class="box1">
        <div class="ml-left">
            <img class="ml-pic" src="../../../assets/img/home/3.png" alt="">
            <div class="ml-text">
                <p class="ml-name">玛丽·乔布斯</p>
                <p class="ml-gl">工龄：10年</p>
                <p class="ml-studen">学生：1000个</p>
            </div>
        </div>
        <el-button class="ml-button l-b ml-button3" round>
            <span class="b-text">查看介绍</span>
        </el-button>
    </div> 

    <div class="box1">
        <div class="ml-left">
            <img class="ml-pic" src="../../../assets/img/home/4.png" alt="">
            <div class="ml-text">
                <p class="ml-name">玛丽·乔布斯</p>
                <p class="ml-gl">工龄：10年</p>
                <p class="ml-studen">学生：1000个</p>
            </div>
        </div>
       <el-button class="ml-button l-b ml-button4" round>
            <span class="b-text">查看介绍</span>
        </el-button>
    </div> 

    <div class="box1">
        <div class="ml-left">
            <img class="ml-pic" src="../../../assets/img/home/5.png" alt="">
            <div class="ml-text">
                <p class="ml-name">玛丽·乔布斯</p>
                <p class="ml-gl">工龄：10年</p>
                <p class="ml-studen">学生：1000个</p>
            </div>
        </div>
        <el-button class="ml-button l-b ml-button1" round>
            <span class="b-text">查看介绍</span>
        </el-button>
    </div> 
    <el-button class="ml-button-more" type="primary" round>查看更多</el-button>
 </div> 
  
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

.box{
    background-color: #f0f9f7;
    height: 440px;
}
.box1{
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 5px;
}
.ml-text{
    margin-top: 0px;
}
.ml-left{
    display: flex;
}
.ml-pic{
    width: 50px;
    height: 50px;
    margin: 5px 20px 20px 10px;
}
.ml-name{
    font-size: 18px;
}
.ml-gl{
    font-size: 14px;
    padding: 10px 0px;
}
.ml-studen{
    font-size: 10px;
}
.ml-button{
    width: 70px;
    height: 20px;
    margin-top:20px;
    color: #fff;
    font-size:12px;
    text-align: center;
    line-height: 20px;
}
.ml-button1{
    background-color: #11cbca;
}
.ml-button2{
    background-color: #ffbc53;
}
.ml-button3{
    background-color: #9269ff;
}
.ml-button4{
    background-color: #4496ff;
}
.ml-button-more{
    width: 100%;
    background-color: #f0f9f7;
    border:1px solid #11cbca;
}
.l-b{
   position: relative;
}
.b-text{
position: absolute;
top: 1px;
left: 10px;
color: white;
}
</style>